<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet"  href="http://localhost:8080/picture/statics/layui/css/layui.css" media="all">
    <script src="http://localhost:8080/picture/statics/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
    <script src="http://localhost:8080/picture/statics/jquary/jquery-2.0.0.min.js"></script>
</head>

    <div class="layui-tab-content" >
        <div class=" layui-col-md3" style="padding: 10px;height: 900px;background-color: #F2F2F2;">
            <div class="layui-card" style="margin-top: 10px;">
                <div class="layui-card-header">
                    菜单维护
                </div>
                <!--动态加载的菜单-->
                <div class="layui-card-body">
                    <div id="resources"></div>
                </div>
            </div>
        </div>
        <div class=" layui-col-md9" style="background-color: #F2F2F2;">
            <!--菜单列表展示页面-->
            <!--列表展示页面布局 start-->
            <div class="layui-row">
                <!--数据表格-->
                <div class="layui-col-md12" style="padding: 10px;height: 900px;">
                    <table class="layui-hide" id="demo" lay-filter="test" style="margin-left: 10px;"></table>
                </div>
            </div>
            <!--end-->
            <!--table工具头设置 start-->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" >菜单资源</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">单笔新增</button>
                    <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->

                </div>
            </script>
            <!--end-->
            <!--行数据操作设置 start-->
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-lg  layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-lg  layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-lg layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
               <a class="layui-btn layui-btn-lg layui-btn-danger layui-btn-xs" lay-event="asspermission">分配权限</a>
            </script>
            <!--end-->
            <!-- 表单弹窗 -->
            <script type="text/html" id="modelUser">
                <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form" action="http://localhost:8080/picture/items/insertuser">
                    <!--<div class="layui-col-md11">-->
                    <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">ID</label>-->
                    <!--<div class="layui-input-block">-->
                    <!--<input type="text" name="id" required  lay-verify="required" placeholder="请输入id" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->

                    <div class="layui-col-md11">
                        <div class="layui-form-item" style="margin-top: 14px;">
                            <label class="layui-form-label">username</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" value='' required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md11">
                        <div class="layui-form-item">
                            <label class="layui-form-label">password</label>
                            <div class="layui-input-block">
                                <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md11">
                        <div class="layui-form-item">
                            <label class="layui-form-label">age</label>
                            <div class="layui-input-block">
                                <input type="text" name="age" required  lay-verify="required" placeholder="请输入你的年龄" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md11">
                        <div class="layui-form-item">
                            <label class="layui-form-label">email</label>
                            <div class="layui-input-block">
                                <input type="text" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md11">
                        <div class="layui-form-item">
                            <label class="layui-form-label">phone</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md11">
                        <div class="layui-form-item">
                            <label class="layui-form-label">area</label>
                            <div class="layui-input-block">
                                <input type="text" name="area" required  lay-verify="required" placeholder="请输入所在地" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md11">
                        <div class="layui-form-item">
                            <label class="layui-form-label">roleId</label>
                            <div class="layui-input-block">
                                <input type="text" name="idcard" required  lay-verify="required" placeholder="请输入身份证号码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <!--调整按钮位置-->
                    <div class="layui-row">
                        <div class="layui-col-md4"><!--4/12--></div>
                        <div class="layui-col-md4 layui-col-md-offset4">
                            <div class="layui-form-item text-right">
                                <!--<button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>-->
                                <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit style="margin-left: 286px;">保存</button>
                            </div>
                        </div>
                    </div>

                </form>
            </script>
            <script>
                layui.use(['layer','table','jquery','form'], function(){
                    var layer = layui.layer;
                    var table = layui.table;
                    var $ = layui.jquery;
                    var form = layui.form;
                    table.render({
                        elem: '#demo'
                        ,url:'http://localhost:8080/picture/gets/list'
                        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        ,height:770
                        ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        ,page:true //开启分页
                        ,cols: [[
                            {type: 'checkbox', fixed: 'left'},
                            {field:'id', width:80,height:50, title: 'ID', sort: true,fixed: 'left'}
                            ,{field:'name', width:90,height:50,  title: '资源名称',fixed: 'left'}
                            ,{field:'path', width:100, height:50, title: '级别', sort: true,fixed: 'left'}
                            ,{field:'url', width:80, height:50, title: '路径',fixed: 'left'}
                            ,{field:'permission', title: '资源权限', width: 120, height:50, minWidth: 100,fixed: 'left'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                            ,{field:'type', width:120,height:50,  title: '菜单类型', sort: true,fixed: 'left'}
                            ,{field:'parentId', width:200,height:50,  title: '父资源ID', sort: true}
                            ,{fixed: 'right', width: 300, height:50, title: '操作',align:'center', toolbar: '#barDemo'}
                        ]]
                    });

                    //监听头工具栏事件
                    table.on('toolbar(test)', function(obj){
                        var checkStatus = table.checkStatus(obj.config.id)
                            ,data = checkStatus.data; //获取选中的数据
                        switch(obj.event){
                            case 'getCheckData':
                                //用户信息录入
                                console.log("用户信息录入");
                                layer.open({
                                    type: 1,
                                    title:  '添加',
                                    content: $('#modelUser').html(),
                                    area:['600px','550px'],
                                    closeBtn:1,
                                    shade:[0.8, '#393D49'],
                                    success: function(index, layero){
                                        //do something
                                        form.on('submit(modelSubmitUser)', function (data) {
                                            layer.close(index);
                                            return false;
                                        });
                                        // layer.close(index);//如果设定了yes回调，需进行手工关闭
                                    },
                                });
                                break;
                            // case 'update':
                            //     if(data.length === 0){
                            //         layer.msg('请选择一行');
                            //     } else if(data.length > 1){
                            //         layer.msg('只能同时编辑一个');
                            //     } else {
                            //         layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                            //     }
                            //     break;
                            case 'isAll':
                                if(data.length === 0){
                                    layer.msg('亲！至少选择一行数据呦ヾ(•ω•`。)');
                                } else {
                                    // layer.msg('删除');
                                    // console.log("选中的数据为：====》 " + JSON.stringify(data));
                                    var idUnion = '';
                                    for(var i=0; i<data.length;i++){
                                        idUnion =  idUnion + data[i].id + "#";
                                    }
                                    console.log("联合主键===》 " + idUnion);
                                    $.ajax({
                                        type:'POST',
                                        dataType:'json',
                                        async:true,
                                        url:'http://localhost:8080/picture/items/deleteuserbyunionid',
                                        data:{
                                            "idUnion" : idUnion
                                        },
                                        success:function (data) {
                                            console.log("返回数据：" + data.msg);
                                            layer.alert(data.msg,{icon:1});
                                            obj.del();
                                        },
                                        error:function (data) {
                                            layer.alert(data.msg,{icon:5});
                                        }
                                    });
                                }
                                break;
                        };
                    });

                    //监听行工具事件
                    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                        var data = obj.data //获得当前行数据
                            ,layEvent = obj.event; //获得 lay-event 对应的值
                        if(layEvent === 'detail'){
                            console.log("用户详细信息===》 " +  JSON.stringify(data));
                            layer.open({
                                type: 2,
                                title:  '查看菜单详情',
                                content: 'http://localhost:8080/picture/gets/menudetail',
                                area:['600px','550px'],
                                closeBtn:1,
                                shade:[0.8, '#393D49'],
                                success: function(layero, index){//弹出后回调
                                    var body = layer.getChildFrame('body', index);
                                    //获取content的窗口
                                    var iframeWin = $(layero).find('iframe')[0].contentWindow;
                                    body.find("#id").val(data.id);
                                    body.find("#name").val(data.name);
                                    body.find("#parentId").val(data.parentId);
                                    body.find("#path").val(data.path);
                                }
                            });

                        } else if(layEvent === 'del'){
                            layer.confirm('确定要删除这条数据吗?(ﾉ´▽｀)ﾉ♪', function(index){
                                layer.close(index);
                                //执行删除操作
                                console.log("获取到的行数据为===》 " +  JSON.stringify(data));
                                $.ajax({
                                    type:'POST',
                                    dataType:'json',
                                    async:true,
                                    url:'http://localhost:8080/picture/items/deleteuser',
                                    data:{
                                        'id':data.id
                                    },
                                    success:function (data) {
                                        console.log("返回数据：" + data.msg);
                                        layer.alert(data.msg,{icon:1});
                                        obj.del(); //删除对应行（tr）的DOM结构
                                    },
                                    error:function (data) {
                                        console.log("错误信息" + data);
                                    }
                                });
                            });
                        } else if(layEvent === 'edit'){
                            // layer.msg('编辑操作');
                            console.log("编辑用户信息" + JSON.stringify(data));
                            layer.open({
                                type: 2,
                                title:  '修改用户信息',
                                content: 'http://localhost:8080/picture/gets/modifymenu',
                                area:['600px','550px'],
                                closeBtn:1,
                                shade:[0.8, '#393D49'],
                                success: function(layero, index){//弹出后回调
                                    var body = layer.getChildFrame('body', index);
                                    //获取content的窗口
                                    var iframeWin = $(layero).find('iframe')[0].contentWindow;
                                    //console.log("asdfasd" + iframeWin);
                                    body.find("#id").val(data.id);
                                    body.find("#username").val(data.username);
                                    body.find("#password").val(data.password);
                                    body.find("#age").val(data.age);
                                    body.find("#email").val(data.email);
                                    body.find("#area").val(data.area);
                                    body.find("#roleId").val(data.roleId);
                                    body.find("#status").val(data.status);
                                    body.find("#idcard").val(data.idcard);
                                }
                            });
                        }
                    });

                });
            </script>
        </div>
    </div>
<script>
    layui.use('tree', function(){
        var tree = layui.tree; //Tab的切换功能，切换事件监听等，需要依赖element模块
        //获取tree数据
        $.ajax({
            type:'POST',
            dataType:'json',
            async:true,
            url:'http://localhost:8080/picture/gets/tree',
            success:function (data) {
                console.log("返回数据：" + JSON.stringify(data));
                // 树形菜单-start
                tree.render({
                    elem: '#resources'  //绑定元素
                    ,showCheckbox:true  //是否开启复选框
                    ,data: new Array(data)
                });
                // 树形菜单-end
            },
            error:function (data) {
            }
        });


    });
</script>
</body>
</html>